<template>
  <div>
    <van-nav-bar 
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      style="background-color: #2c3e50"
      :border='false'
    />
    <div  class="merchant-wrap">
    <div class="header-wrap">
      <div class="header">
        <div class="header-avatar">
          <img :src="storeInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'">
        </div>
        <div class="more">
          <div @click="getShare" style="color: #1089ff" v-if="storeInfo.vip == 1" >
              分享
            <van-icon name="arrow" />
          </div>
        </div>
        <div style="margin-top: -25px;font-size: 18px;text-align: center;color: rgb(125,91,56);">
          {{ storeInfo.title }}
          <span style="background-color: rgb(125,91,56);color: white;font-size: 12px;border-radius: 4px;padding: 2px 4px;">
          <template v-if="storeInfo.vip == null">
              普通商家
          </template>
          <template v-else-if="storeInfo.vip == 1">
              分店
          </template>
          </span>
        </div>
        <div class="header-tool">
          <button @click="getGoods">发布商品</button>
          <button @click="edit">修改资料</button>
        </div>
      </div>
    </div>
    <div class="store-data">
      <!-- <div>
        <p>粉丝数</p>
        <p>0</p>
      </div> -->
      <div>
        <p>今日收入</p>
        <p>{{ toolData.todayMoney }}</p>
      </div>
      <div>
        <p>累计收入</p>
        <p>{{ toolData.allMoney }}</p>
      </div>
      <div>
        <p>我的奖励/份</p>
        <p>{{ toolData.rewardNumber }}</p>
      </div>
    </div>
    <div class="links">
      <div @click="getGoods">
        <svg class="icon" aria-hidden="true" style="font-size: 26px">
            <use xlink:href="#icon-svg-16"></use>
        </svg>  
        <p>商品</p>
      </div>
      <div @click="getCard">
        <svg class="icon" aria-hidden="true" style="font-size: 26px">
            <use xlink:href="#icon-shengchengfapiaojiankong1"></use>
        </svg>  
        <p>卡券</p>
      </div>
      <div @click="getOrder">
        <svg class="icon" aria-hidden="true" style="font-size: 26px">
            <use xlink:href="#icon-svg_huaban"></use>
        </svg>
        <p>订单</p>
        </div>
      <div @click="getData">
        <svg class="icon" aria-hidden="true" style="font-size: 26px">
            <use xlink:href="#icon-svg-22"></use>
        </svg>
        <p>数据</p>
        </div>
    </div>  
    <div>
      <van-cell-group style="margin-top: 5px">
        <van-cell title="店铺状态">
          <div slot="right-icon">
            <van-switch disabled v-model="state" @input="getState"  active-color="#01B26A" size="14px" />
          </div>
        </van-cell>
        <!-- <van-cell title="自动接单">
          <div slot="right-icon">
            <van-switch v-model="checked" active-color="#01B26A" size="14px" />
          </div>
        </van-cell>
        <van-cell title="语音播报">
          <div slot="right-icon">
            <van-switch v-model="checked1" active-color="#01B26A" size="14px" />
          </div>
        </van-cell> -->
        <van-cell title="店铺升级" :value="storeInfo.vip == 0 || storeInfo.vip == null ? '立即升级' : '已是最高等级'" @click=" is_upType = true" />
        <van-cell title="会员中心" v-if="storeInfo.vip == 1" is-link :to="{name:'storeMineMember',params: { store_id : storeInfo.id}}" />
        <van-cell title="广告弹窗" is-link :to="{path:'/store/mine/ad'}" />
        <van-cell title="礼包专区" is-link :to="{name:'storeMinePackage',params: {store_id: storeInfo.id}}" />
      </van-cell-group>
    </div>
    </div>
    <van-popup v-model="is_upType" :style="{ height: '40%' ,width: '80%',borderRadius: '10px' }">
      <div style="text-align: center;border-bottom: 1px solid #999;padding: 5px 0;"><h3 style="margin: 0">店铺升级</h3></div>
      <div><h3 style="padding:0 15px;margin: .2rem 0">权益</h3></div>
     <div style="padding: 5px 7px;">
       <p style="margin: .1rem 0">· 可以发展店长 </p>
      <p style="margin: .1rem 0">· 可以发展分店 </p>
      <p style="margin: .1rem 0">· 享受分店和店长收益 </p>
     </div>
      <van-button type="primary" block style="position:absolute;bottom: 0;left: 0;right:0" @click="upVip" :disabled="this.global.state.store_up" >确认支付¥200元升级</van-button>
    </van-popup>
  </div>
</template>

<script>
import { Notify } from 'vant';
export default {
  name: 'Merchant',
  data(){
    return {
      storeInfo: null,
      checked: null,
      checked1: null,
      state: null,
      is_upType: false,
      toolData:{}
    }
  },
  created(){
    this.storeInfo = this.global.state.storeInfo;
    if(this.global.state.storeInfo.state = "Normal"){
       this.state = true;
    }else {
      this.state = false;
    }
    this.getStatistics();
  },
  methods:{
    getStatistics(){
      let params = {};
      params.token = sessionStorage.getItem("token");
      this.axios.get('/api/store/manager/income',{params}).then(res=>{
        this.toolData = res.data.data;
      }).catch(err=>{
        console.log(err);
        
      })
    },
    getState(){
      this.axios.post('/api/store/manager/status',{
        token: this.global.state.accessToken,
        status: this.state ? 'Normal' : 'Closed'
      }).then(res=>Notify({type:'success',background: '#07c160',message:res.data.message,onClose:()=>{
					this.btndisabled = false;
				    this.axios.get('/api/wechatofficial/mine?token='+this.global.state.accessToken).then(result => {
					this.global.state.storeInfo.state = result.data.data.stores;
				})
				}})).catch(err=>Notify({type:'error',message:'修改失败'}))
    },
    onClickLeft(){
      this.$router.push({path:'../../mine'})
    },
    edit(){
      this.$router.push({path:'/store/mine/setting'})
    },
    getGoods(){
      this.$router.push({path:'/store/mine/goods'})
    },
    getOrder(){
      this.$router.push({path:'/store/mine/order'})
    },
    getData(){
       this.$router.push({path:'/store/mine/data'})
    },
    getCard(){
      this.$router.push({path:'/store/mine/card'})
    },
    upVip(){
      if(this.storeInfo.vip == 0 || this.storeInfo.vip == null){
        this.axios.post('/api/store/manager/upgrade/a',{
        token: this.global.state.accessToken,
        status: this.state ? 'Normal' : 'Closed'
      }).then(res=>{
        this.global.state.store_up = true;
        Notify({type:'error',message:res.data.message});
        this.axios.get('/api/wechatofficial/mine?token='+this.global.state.accessToken).then(result => {
          this.global.state.storeInfo.state = result.data.data.stores;
          this.is_upType = false;
          this.storeInfo = result.data.data.stores;
        })
        
      }).catch(err=>Notify({type:'error',message:err.response.data.message}))
      }else {
        this.is_upType = false;
        Notify({type:'error',message:'已是最高等级',background: '#07c160'});
      }
    },
    getShare(){
      this.$router.push({name:'drawApplyshare',params:{type: 'store'}})
    }
  },
  destroyed() {
    console.log(this.global.state.storeInfo)
  },
}
</script>
<style lang="less" scoped>
.merchant-wrap {
  background-color: rgba(170,170,170,.1);
  .header-wrap {
    position: relative;
    height: 135px;
    background-color: #2c3e50;
    margin-bottom: 85px;
    .header {
      position: absolute;
      top: 50%;
      left: 15px;
      right: 15px;
      max-width: 100%;
      height: 100%;
      background-color: rgba(227,200,153,1);
      border-radius: 10px;
      .header-avatar {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        transform: translateY(-50%);
        img {
          height: 100%;
          width: 100%;
        }
      }
      .more {
        position: absolute;
        right: 5px;
        top: 5px;
        color: white
      }
      .header-tool {
        display: flex;
        justify-content: space-between;
        padding: 1.5rem 0;
        button {
          border: none;
          border-radius: 8px;
          background: white;
          line-height: 20px;
          padding: 7px 1.1538rem;
          margin: 0 2.6923rem;
        }
      }
    }
  }
   .links {
      padding: 10px 0 3px;
      display: grid;
      grid-template-columns:1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      text-align: center;
      background: rgba(255,255,255,.5);
      border-bottom: 3px solid rgba(170,170,170,.1)
    }
    .links div p {
      margin: .2rem 0;
    }
}

.store-data {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom:3px solid rgba(170,170,170,.1);
  margin: 5px 0;
  padding: 10px 0
}
.store-data div:nth-child(1) p,.store-data div:nth-child(2) p,.store-data div:nth-child(3) p{
  border-right: 1px solid rgba(170,170,170,.5);
}
.store-data div p {
  color: rgb(125, 91, 56);
  margin: 0;
  padding: 3px 0;
  text-align: center;
}
.store-data div p:nth-child(2) {
  font-size: 1.2rem;
  font-weight: 600
}

</style>